<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<view class="header-content">
				<view class="back-button" @click="goBack">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
				<view class="title">上架服务设置</view>
				<view class="placeholder"></view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<view class="card">
				<image class="card-bg" src="/static/authentication/serviceBgFirst.png" mode=""></image>
				<view class="card-content">
					<view class="card-content-left">
						<image src="/static/authentication/guide-server-dipei.png" mode=""></image>
					</view>
					<view class="card-content-right">
						<view class="card-content-right-top">
							预约地陪
						</view>
						<view class="card-content-right-middle">
							制定金额、完善资料，一键开启向导地陪服务
						</view>
						<view class="card-content-right-footer">
							<view class="card-content-right-footer-btn" v-if="dipeiStatus == 1"
								@click="handleToEditUp('预约地陪')">
								下架
							</view>
							<view class="card-content-right-footer-btn" @click="handleToLocalGuide">
								设置
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="card">
				<image class="card-bg" src="/static/authentication/serviceBgSecond.png" mode=""></image>
				<view class="card-content">
					<view class="card-content-left">
						<image src="/static/authentication/guide-server-gonglue.png" mode=""></image>
					</view>
					<view class="card-content-right">
						<view class="card-content-right-top">
							定制攻略
						</view>
						<view class="card-content-right-middle">
							为用户制定专属行程，精准适配每一次旅行
						</view>
						<view class="card-content-right-footer">
							<view class="card-content-right-footer-btn" v-if="gonglueStatus == 1"
								@click="handleToEditUp('定制攻略')">
								下架
							</view>
							<view class="card-content-right-footer-btn" @click="handleToCustomizedStrategy">
								设置
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="card">
				<image class="card-bg" src="/static/authentication/serviceBgThird.png" mode=""></image>
				<view class="card-content">
					<view class="card-content-left">
						<image src="/static/authentication/guide-server-zixun.png" mode=""></image>
					</view>
					<view class="card-content-right">
						<view class="card-content-right-top">
							线上咨询
						</view>
						<view class="card-content-right-middle">
							让你不出门，也能当导游，旅途疑问，即时解答
						</view>
						<view class="card-content-right-footer">
							<view class="card-content-right-footer-btn" v-if="zixunStatus == 1"
								@click="handleToEditUp('线上咨询')">
								下架
							</view>
							<view class="card-content-right-footer-btn" @click="handleToZixun">
								设置
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		serviceTypeList,
		updateServiceTypesByUserId
	} from '@/request/api.js';
	export default {
		data() {
			return {
				serverList: [],
				dipeiStatus: 0,
				gonglueStatus: 0,
				zixunStatus: 0
			};
		},
		onShow() {
			this.initPageData()
		},
		methods: {
			initPageData() {
				let params = {
					userId: this.$store.state.userInfo.userId,
				}
				serviceTypeList(params).then(res => {
					if (res.data.code == 200) {
						this.serverList = res.data.rows
						if (this.serverList && this.serverList.length > 0) {
							this.serverList.forEach(item => {
								if (item.typeName == '预约地陪') {
									this.dipeiStatus = item.isActive
								} else if (item.typeName == '定制攻略') {
									this.gonglueStatus = item.isActive
								} else if (item.typeName == '线上咨询') {
									this.zixunStatus = item.isActive
								}
							})
						}
					}
				})
			},
			goBack() {
				uni.navigateBack();
			},
			handleToLocalGuide() {
				uni.navigateTo({
					url: "/pages_sub/authentication/Guide/BookingLocalGuide"
				})
			},
			handleToCustomizedStrategy() {
				uni.navigateTo({
					url: "/pages_sub/authentication/Guide/CustomizedStrategy"
				})
			},
			handleToZixun(){
				uni.navigateTo({
					url: "/pages_sub/authentication/Guide/OnlineConsultation"
				})
			},
			handleToEditUp(text) {
				let params = {
					userId: this.$store.state.userInfo.userId,
					typeName: text
				}
				updateServiceTypesByUserId(params).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: text + '下架成功',
							icon: 'none',
							duration: 1400
						});
						setTimeout(() => {
							this.initPageData()
						}, 1500);
					}
				})
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(to bottom, #FCC951, #FFECBE);
		display: flex;
		flex-direction: column;
	}

	/* 顶部标题栏样式 */
	.header {
		width: 100%;
		background: transparent;

		.header-content {
			padding-top: var(--status-bar-height);
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.back-button {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;
			}

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #000;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}

			.placeholder {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}
	}

	/* 内容区域 */
	.content {
		flex: 1;
		padding: 20rpx 30rpx;

		.card {
			position: relative;

			.card-bg {
				width: calc(100vw - 60rpx);
				height: 320rpx;
			}
		}

		.card-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 240rpx;
			padding: 20rpx;
			position: absolute;
			top: 0;

			.card-content-left {
				width: 240rpx;
				height: 240rpx;
				margin-right: 48rpx;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.card-content-right {
				.card-content-right-top {
					font-weight: bold;
					font-size: 30rpx;
				}

				.card-content-right-middle {
					font-size: 26rpx;
					color: #4D4D56;
					margin: 30rpx 0;
				}

				.card-content-right-footer {
					display: flex;
					justify-content: flex-end;

					.card-content-right-footer-btn {
						width: 110rpx;
						height: 44rpx;
						font-size: 26rpx;
						font-weight: bold;
						background-color: #FFA704;
						text-align: center;
						margin-right: 20rpx;
						line-height: 44rpx;
						border-radius: 10rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>